In diesem Kapitel schauen wir uns HTML5-Formulare an, die man ausfüllen und zu einem Server senden kann. Auch hier ist SelfHTML eine gute Quelle zum Lernen.

Alle Formularelemente, die zum Server gesendet werden sollen, müssen sich in einem form-Element befinden. Das form-Element hat zwei wichtige Attribute: Das Attribut „action“ erhält als Wert eine URL, an welche beim Klicken auf den Submit-Button Daten gesendet werden. Dadurch wird ein HTTP-Request ausgelöst. In den meisten Fällen wird das Attribut die URL eines Skriptes enthalten, mit welchem auf dem Server die Formulareingaben ausgewertet werden. „method“ legt mit get als Standardwert oder mit post die HTTP-Methode fest, mit der die Daten gesendet werden. In diesem ersten Formular sehen Sie zwei Buttons. Der Button vom Typ Reset setzt alle Eingaben zurück. Der Submit-Button löst den Sendevorgang aus.

Wir sehen bei den Input-Elementen schon wieder dieselbe Diskussion wie bei dem break-Element. Laut aktuellem HTML5-Standard sind alle Input-Elemente „standalone“ und benötigen daher kein End-Tag und auch kein Slash vor dem Ende des Elements. Dadurch ist das Element nicht strikt XML beziehungsweise XHTML-konform. Der Slash ist aber wohl möglich laut HTML5-Standard und wird einfach ignoriert.

Mit dem Input-Element erzeugen Sie Elemente innerhalb des Formulars, beispielsweise Buttons, Textfelder, Auswahlfelder und so weiter. Es gibt drei verschiedene Arten von Buttons, gekennzeichnet durch das type-Attribut: type="button" zum Auslösen clientseitiger Aktionen, üblicherweise zum Anstoßen einer JavaScript-Funktion, type="submit" zum Absenden eines Formulars und type="reset" zum Zurücksetzen eines Formulars.

Dieses Formular leitet die Eingaben an ein Auswertungsskript, das die Daten dann serverseitig weiterverarbeitet. Es gibt zwei Eingabefelder, die benutzername und password heißen und in die man Text eintragen kann. Außerdem einen Button zum Zurücksetzen und zum Absenden des Formulars. Unten sehen Sie das Formular vor und nach dem Ausfüllen. Blöd ist noch, dass jeder das Passwort sehen kann.

Hier sehen Sie nochmals die beiden Eingabefelder vom Typ „text“. Dieses Input-Element vom Typ „text“ nimmt einfache Texteingaben vom Benutzer entgegen und schickt diese beim Absenden des Formulars mit. Es gibt aber zwei Probleme mit diesem Formular: Passwörter sollten nicht als Text angezeigt werden, wir benötigen also einen neuen Input-Typen. Das Formular wird standardmäßig mit der HTTP-Methode GET versendet, dies bedeutet, dass sowohl der Benutzername als auch das Passwort in der Adressleiste des Browsers angezeigt werden. Mit der Angabe „method=post“ verhindern wir dies.

Während der Standardwert für input type „text“ ist und eine Texteingabe erlaubt, gibt es weitere einzeilige Eingabefelder, deren Inhalt jeweils eine andere Bedeutung hat. Das sind die Typen password, search, tel, url und email. Zudem gibt es seit HTML5 weitere Input-Typen für zum Beispiel Zahlen, Datum und Uhrzeit, von denen hier aber nur einige vorgestellt werden.

In einem Eingabefeld können Sie mit type="password" Geheimnummern, Passwörter und so weiter eingeben. Die eingegebenen Zeichen werden dabei durch Platzhalter (meistens Sternchen) dargestellt, sodass Personen im Raum des Anwenders nicht zufällig das eingegebene Passwort mitlesen können. Passwörter werden beim normalen HTTP-Protokoll trotz der verdeckten Eingabe im Klartext über das Internet übertragen! Es gibt hier also keine Verschlüsselung!

Ein Dropdown-Feld ist ein kompaktes Eingabeelement, bei dem die Nutzerin oder der Nutzer genau einen Wert aus einer vorgegebenen Liste auswählen kann. Im Formular erhält dieses Feld einen Namen – im Beispiel heißt es „voegel“ –, sodass der gewählte Eintrag beim Absenden zusammen mit diesem Namen an den Server übertragen wird. Jeder Eintrag der Liste besitzt intern einen eindeutigen Wert, der übertragen wird, während der sichtbare Text lediglich der Anzeige dient. Bei Bedarf lässt sich eine Vorauswahl festlegen, indem man einer der Optionen das Attribut „selected“ zuweist; so erscheint diese Option bereits geöffnet, wenn die Seite geladen wird. Sowohl das eigentliche Auswahlfeld als auch jeder Listeneintrag müssen ordnungsgemäß abgeschlossen werden, damit der Browser die Struktur korrekt versteht. Das Dropdown spart Platz, verhindert Tippfehler und erleichtert die Validierung, weil nur zulässige Werte übermittelt werden.

Ein Eingabefeld vom Typ „search“ ist für die Eingabe von Suchbegriffen vorgesehen. Einige Browser ergänzen möglicherweise ein Lupensymbol, fügen ein Bedienfeld hinzu, welches das Eingabefeld leert oder passen gegebenenfalls automatisch den Wert eines input-Elements vom Typ submit an.

Mit input type="tel" können Sie ein Eingabefeld für eine Telefonnummer vorbereiten. Bei mobilen Geräten wird eine angepasste Tastatur eingeblendet.

Mit input type="email" können Sie E-Mail-Adressen eingeben. Bei mobilen Geräten (wie iOS oder Android) erscheint bei der Eingabe das „At“-Symbol automatisch im Tastenfeld. Die Browser verwenden zur Prüfung einen regulären Ausdruck.

Mit input type="url" können Sie Web-Adressen eingeben. Schon während der Eingabe wird überprüft, ob diese eine gültige Web-Adresse ist. Es wird überprüft, ob die Internet-Adresse valide ist. Im Internet Explorer 10 und Chrome erscheint sonst eine Fehlermeldung; Firefox und Opera verhindern ein Senden.

Mit input type="hidden" können Sie Felder in einem Formular definieren, die dem Anwender nicht angezeigt werden. Beim Absenden des Formulars werden die Daten versteckter Felder mit übertragen. Auf diese Weise können Sie beispielsweise zusätzliche Informationen an das verarbeitende Script übergeben. Auch für JavaScript ist diese Möglichkeit interessant. Da ein JavaScript Formularfelder problemlos auslesen und deren Werte auch ändern kann, ist es auf diese Weise bequem möglich, Daten zu speichern, die nicht am Bildschirm angezeigt werden. Die Daten werden dann, wenn der Anwender das Formular abschickt, mit übertragen.

Hier sehen Sie als Beispiel ein verstecktes Eingabefeld, das in der Formulardarstellung des Webbrowsers nicht zu sehen ist. Hinter value stehen dann die zusätzlichen Informationen, die mitgesendet werden.

HTML5 bietet eine Vielzahl von neuen Eingabetypen für die Eingabe von Zahlen. Bei mobilen Geräten wird dann ein Nummernfeld eingeblendet, das die Eingabe erleichtert. Sie können ein Eingabefeld mit input type="number" nur auf Zahleneingaben beschränken. Folgende Attribute können verwendet werden: max legt den Maximalwert fest, min legt den Mindestwert fest, step legt fest, in welchen Stufen die Werte durch eine Scrollbar eingegeben werden dürfen, value ist die Vorbelegung mit einem bestimmten Wert.

Hier sehen Sie ein solches Nummernfeld. Es ermöglicht freie Eingabe sowie ein Inkrementieren oder Dekrementieren über die Scroll-Pfeile auf der rechten Seite.

Das Eingabefeld input type="range" definiert einen Schieberegler, einen sogenannten Slider. Folgende Attribute können verwendet werden: max legt den Maximalwert fest, der Standardwert ist einhundert, min legt den Mindestwert fest, der Standardwert ist null, step legt fest, in welchen Stufen die Werte eingegeben werden dürfen, orient vertical legt fest, dass der Slider vertikal angezeigt werden soll, value ist die Vorbelegung mit einem bestimmten Wert, an dem der Schieberegler eingestellt ist.

HTML5 bietet eine Vielzahl von neuen Eingabetypen für Datums- und Zeitangaben. Bei mobilen Geräten wird dann ein Datumsfeld oder sogar der Kalender eingeblendet, was die Eingabe erleichtert. Mit input type="date" können Sie Datumseingaben abfragen.

Mit input type="datetime-local" können Sie eine Datumseingabe mit einer Zeitangabe ohne Zeitzone kombinieren.

Es gibt einige spezifische Input-Typen, wie zum Beispiel tel, date, datetime-local, week, month und so weiter. Diese sind nicht in jedem Browser implementiert und können daher Probleme verursachen. In der Regel ersetzen Browser Input-Typen, die sie nicht kennen, mit dem Input-Typ text, die Funktionalität bleibt so erhalten. Wird dennoch ein spezifisches Eingabeformat benötigt, muss dies zum Beispiel mit JavaScript erneut geprüft werden.

Ein textarea-Element ist ein mehrzeiliges Eingabefeld. Es dient zum Beispiel der Eingabe von mehrzeiligen Texten, etwa Kommentaren, Forumsbeiträgen oder Benachrichtigungen. Das textarea-Element kann über die rechte untere Ecke in seiner Größe verändert werden. Sie können seine Größe aber auch über Attribute oder über CSS festlegen.

Folgende Attribute sind beim textarea-Element möglich: Für die weitere serverseitige Verarbeitung benötigen auch die Textareas ein name-Attribut. rows bestimmt die Anzahl der angezeigten Zeilen und damit die Höhe. cols bestimmt die Anzahl der angezeigten Spalten. Spalten bedeutet dabei die Anzahl der Zeichen pro Zeile. readonly lässt keine Eingaben im Feld zu.

Radio-Buttons sind eine Gruppe von beschrifteten, meist runden Knöpfen, von denen der Anwender einen auswählen kann. Es kann immer nur einer der Radio-Buttons ausgewählt sein. Folgende Attribute sind möglich: name – jeder Radio-Button erhält einen internen Bezeichnernamen. Alle Radio-Buttons, die den gleichen Namen haben, gehören zu einer Gruppe, das heißt, von diesen Buttons kann der Anwender genau einen markieren. value bestimmt einen internen Bezeichnerwert für jeden Radio-Button. Wenn man das Formular abschickt, wird der Bezeichnerwert des markierten Buttons übertragen. checked: Wenn Sie eine der Auswahlmöglichkeiten vorselektieren wollen, dann notieren Sie in dem input-Tag des entsprechenden Radio-Buttons das alleinstehende Attribut „checked“.

Hier sehen Sie drei Radio-Buttons, die denselben Namen haben. Der erste Button ist durch „checked“ standardmäßig angewählt. Der Wert von value des gewählten Buttons wird dann zum Server übertragen.

Eine Checkbox ist ein ankreuzbares, meist quadratisches Kontrollfeld. Der Benutzer kann es auswählen oder die Auswahl entfernen. Die Werte von ausgewählten Checkboxen werden beim Absenden des Formulars mit übertragen. Es lassen sich auch Gruppen von Checkboxen mit gleichen Namen bilden, was technisch gesehen nur für die Übertragung wichtig ist, da sich Checkboxen auch in einer Gruppe unabhängig voneinander auswählen lassen. Checkboxen in HTML kennen nur die Zustände ausgewählt und nicht ausgewählt. Die möglichen Attribute sind identisch zu den Radio-Buttons.

Hier sehen Sie drei Checkboxen, die man jeweils unabhängig voneinander an- oder abwählen kann. Die values der gewählten Boxen werden dann in einem Array zum Server übertragen, wenn das Formular abgesendet wird.

Um die barrierefreie Nutzung von Webseiten zu gewährleisten, sollten alle Formulare sowohl gruppiert als auch ausreichend beschriftet werden. Zudem wird die anklickbare Fläche vergrößert, wenn Input-Elemente gruppiert werden. Der aktuelle Stand des letzten Formulars war wie folgt:

Hier sehen Sie ein angepasstes Beispiel, nachdem alle notwendigen Label hinzugefügt wurden. Bitte erstellen Sie HTML-Formulare ausschließlich in dieser Art und Weise.

Mit dem fieldset-Element können Elemente innerhalb von Formularen gruppiert werden. Mit dem legend-Element kann zusätzlich eine Überschrift für das fieldset-Element definiert werden. Standardmäßig zeichnen die Browser einen Rahmen um das fieldset. Das legend-Element liegt genau auf diesem Rahmen.

Das Element fieldset kann unter HTML5 folgende Attribute haben: Mit dem Wert disabled kann das fieldset ausgegraut angezeigt, aber nicht auswählbar gemacht werden. form: Mit dem Wert der id eines Formulars kann es diesem zugeordnet werden. Durch den Namen kann es in einem verarbeitenden Script ausgewertet werden.

Hier sehen Sie ein abschließendes Beispiel der Pizza-Auswahl mit Labels und mit Fieldset-Gruppierung. Unten rechts sehen Sie dann, wie das Formular letztlich aussieht. Die gesamte Darstellung kann natürlich mit CSS optisch formatiert werden.